<template>
  <div
    class="inline-block relative"
    :class="{
      'w-[28px] h-[28px]': type == 'large',
      'w-[22px] h-[22px]': type == 'default'
    }"
  >
    <img :src="formatBallColorSrc" class="w-full h-full object-cover block" />
    <span
      class="num"
      :class="{
        'text-[14px] w-[28px] h-[28px] leading-[24px]': type == 'large',
        'text-[12px] w-[22px] h-[22px] leading-[20px]': type == 'default'
      }"
      >{{ num < 10 ? "0" + num : num }}</span
    >
  </div>
</template>
<script setup>
import redImg from "@/assets/images/lottery-ball/lhc/red.png";
import blueImg from "@/assets/images/lottery-ball/lhc/blue.png";
import greenImg from "@/assets/images/lottery-ball/lhc/green.png";

const props = defineProps({
  num: {
    type: [Number, String],
    default: 1
  },
  type: {
    type: String,
    default: "default" // default, big
  }
});
const state = reactive({
  redBall: [0, 1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46],
  blueBall: [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48],
  greenBall: [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49]
});
// 获取球的颜色
const formatBallColorSrc = computed(() => {
  if (state.redBall.includes(props.num)) {
    return redImg;
  } else if (state.blueBall.includes(props.num)) {
    return blueImg;
  } else if (state.greenBall.includes(props.num)) {
    return greenImg;
  }
});
</script>
<style lang="scss" scoped>
.num {
  position: absolute;
  text-align: center;
  z-index: 10;
  top: 0;
  left: 0;
  color: #000;
}
</style>
